<template lang="">
    <div>
        <el-form :model="form" ref="ruleForm" label-width="100px">
            <el-form-item label="发送类型">
                <el-switch v-model="isEmitAll" active-text="全体发送" inactive-text="精确发送">
                </el-switch>
            </el-form-item>
            <el-form-item label="接收院系">
                <template>
                    <el-select v-model="form.department" placeholder="请选择院系" multiple>
                        <el-option v-for="item in $store.state.form.department" :key="item.departmentId"
                            :label="item.departmentName" :value="item.departmentId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="接收年级">
                <template>
                    <el-select v-model="form.grade" placeholder="请选择年级" multiple>
                        <el-option v-for="item in $store.state.form.grade" :key="item.gradeId" :label="item.gradeName"
                            :value="item.gradeId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

        </el-form>
        <div class="advise text-center">
            若需要发送给所选院系或年级的全部学生，推荐将问卷发布类型改为<el-link type="primary" @click="isEmitAll = true">全体发送</el-link><br>
            若需要选择性地发送给某一专业或班级，推荐将问卷发布类型改为<el-link type="primary" @click="isEmitAll = false">精确发送</el-link>
        </div>
        <div class="button-group-emit">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'Step1',
        data() {
            return {
                isEmitAll: true,
                form: {
                    grade: [],
                    department: []
                },
            }
        },
        methods: {
            ...mapActions(['getGrade', 'getDepartment']),
            changeEmitAll(value) {
                this.$store.commit('changeEmitAll', value)
            },
            nextStep() {
                if (this.form.grade.length == 0 || this.form.department.length == 0) {
                    this.$message({
                        message: '请先选择院系与年级',
                        type: 'warning'
                    })
                } else {
                    this.$store.commit('setUserSelected', { key: 'grade', arr: this.form.grade })
                    this.$store.commit('setUserSelected', { key: 'department', arr: this.form.department })
                    this.$store.commit('changeEmitAll', this.isEmitAll)
                    if (this.isEmitAll) {
                        this.$store.commit('nextStep', 3)
                        this.$store.commit('setUserSelected', { key: 'class', arr: '全选' })
                        this.$store.commit('setUserSelected', { key: 'major', arr: '全选' })
                        this.$router.replace('step4')
                    } else {
                        console.log(this.form);
                        this.$store.commit('nextStep', 1)
                        this.$router.replace('step2')
                    }
                }
            }
        },
        mounted() {
            this.getGrade()
            this.getDepartment()
        },

    }
</script>
<style scoped>
    .el-form {
        width: 500px;
        margin: 0 auto;
    }

    .el-form .el-form-item {
        padding: 10px;
    }

    .advise {
        color: rgb(143, 143, 143);
    }
</style>